import { observer, inject } from "mobx-react";
import { isEqual } from 'lodash';
import { WeaRightMenu, WeaTop } from 'ecCom';
import TemplateViewContent from './TemplateViewContent';
import { toJS } from "mobx";
@inject("edcExcelTemplateViewStore")
@observer
export default class TemplateView extends React.Component {
    componentWillReceiveProps(nextProps) {
        const { location: { query } } = this.props;
        const { edcExcelTemplateViewStore: store, location: { query: nextQuery } } = nextProps;
        if (!isEqual(toJS(query), toJS(nextQuery))) {
            store.updateLocationQuery(nextQuery);
        }
    }
    componentDidMount(){
        const { edcExcelTemplateViewStore: store, location: { query } } = this.props;
        store.updateLocationQuery(query);
    }
    render() {
        const { edcExcelTemplateViewStore: store, location: { query } } = this.props;
        const menu = [];
        const btns = [];
        return (
            <WeaRightMenu datas={menu}>
                <WeaTop
                    title={store.title}
                    iconBgcolor="#1a57a0"
                    icon={<i className="icon-coms02-Data-center" />}
                    showDropIcon={true}
                    dropMenuDatas={menu}
                    loading={store.loading}
                    buttons={btns}
                >
                    <TemplateViewContent store={store}></TemplateViewContent>
                </WeaTop>
                <input name="key" type="hidden" value={query.id}></input>
            </WeaRightMenu>
        )
    }
}